var PrintOrder = function () {
  var template = /*html*/ `
    <div class="print-order" v-loading.fullscreen.lock="loading">
      <div style="height:40px;margin-bottom:10px">
        <el-button type="primary" size="small" @click="print">打印</el-button>

        <config-button v-if="tableColumns!==null" :config.sync="pageConfig" :table-columns="tableColumns">外协单设置</config-button>
        <span style="margin-left:20px;">供应商：</span>
        <el-select filterable size="small" v-model="selectSupplier" value-key="supplierName" style="width:180px;" @change="supplierChange">
          <el-option v-for="(contactUser,index) in contactUserList" :key="'contactUser_'+index" :value="contactUser"
            :label="contactUser.supplierName"></el-option>
        </el-select>
      </div>
      <div class="print-order-div print-area" style="text-align:center" v-if="user!==null&&pageConfig.tableColumns!==undefined">
        <div class="print-order-content" :style="[pageSize]">
          <div ref="printArea">
            <div class="order-title" :style="[textSize.titleSize]">
              <span>{{user.company}}</span>
              <span style="margin-left:20px">委外加工清单</span>
            </div>
            <div style="margin-top:-1px" id="outOrderTablePrint">
              <table class="out-order-table" cellspacing="0" cellpadding="0" :style="[textSize.tableSize]">
                <colgroup>
                  <template v-for="tableColumn in pageConfig.tableColumns">
                    <col :key="'col_'+tableColumn.id" :style="{width:tableColumn.width+'px'}">
                  </template>
                </colgroup>
                <tr v-if="pageConfig.showTableHead">
                  <th v-for="tableColumn in pageConfig.tableColumns" :key="'head_'+tableColumn.id" :style="{width:tableColumn.width+'px'}">
                    <span>{{tableColumn.label}}</span>
                    <div v-if="tableColumn.hasSort&&mode==='edit'" class="sort-caret" :class="[tableColumn.sortType]">
                      <div class="sort-index">{{getSortIndex(tableColumn)}}</div>
                      <i class="ascending" @click="toOrderData(tableColumn,'ascending')"></i>
                      <i class="descending" @click="toOrderData(tableColumn,'descending')"></i>
                    </div>
                  </th>
                </tr>
                <template v-for="(order,index) in printOrders">
                  <tr :key="'oreder_'+order._id">
                    <td v-for="(tableColumn,colIndex) in pageConfig.tableColumns" :key="'data_'+tableColumn.id">
                      <div v-if="!tableColumn.config.edit" :style="[getAlignStyle(tableColumn)]">
                        {{getTableData(order,tableColumn,colIndex)}}
                      </div>
                      <div v-else>
                        <show-textarea v-if="mode==='edit'" class="orderTextarea" v-model="order[tableColumn.config.field]" :autosize="true">
                        </show-textarea>
                        <div v-else v-html="formatShowData(order[tableColumn.config.field])" :style="[getAlignStyle(tableColumn)]">
                        </div>
                      </div>
                    </td>
                  </tr>
                </template>
              </table>
            </div>
            <div class="print-order-floor clearfix" :style="[textSize.otherSize]">
              <div class="floor-left">
                <span>单号:</span>
                <input v-if="mode==='edit'" v-model="printOrderNo" style="width:12em;" :style="[textSize.otherSize]" maxlength="20"
                  placeholder="请输入单号">
                <span v-else>{{printOrderNo}}</span>
              </div>
              <div class="floor-value">收货人:{{selectSupplier.contactName}}</div>
              <div class="floor-value">联系电话:{{selectSupplier.contactPhone}}</div>
            </div>
            <div v-if="clauseContent!==''" style="text-align:left;margin-top:10px;" :style="[textSize.otherSize]">
              <div>备注：</div>
              <div style="padding-left:3em">
                <div class="vue-rich-editor" v-html="clauseContent"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;

  return {
    mixins: [printOutOrderMixin('outOrder')],

    data: function () {
      var contactUserList = this.getContactUserList();
      var selectSupplier = {};
      if (contactUserList.length > 0) {
        selectSupplier = contactUserList[0];
      }
      return {
        contactUserList: contactUserList,
        selectSupplier: selectSupplier
      };
    },

    methods: {
      print: function () {
        if (this.printOrderNo === '') {
          this.$alert('请输入单号','信息');
          return;
        }

        this.toPrintOrder('outOrder');
      },

      getContactUserList: function () {
        var orders = this.orders;
        orders = _.uniqBy(orders, 'supplierName');
        var contactUserList = _.map(orders, function (order) {
          return {
            supplierName: order.supplierName,
            contactName: order.contactUser,
            contactPhone: order.contactPhone
          };
        });
        return contactUserList;
      },

      supplierChange: function () {
        this.searchData();
      },

      searchData: function () {
        var selectSupplier = this.selectSupplier;
        var outOrderList = this.outOrderList;
        outOrderList = _.clone(outOrderList);
        var supplierName = selectSupplier.supplierName;
        if (!SysUtil.isEmpty(supplierName)) {
          outOrderList = _.filter(outOrderList, {
            supplierName: supplierName
          });
        }
        this.searchOutOrderList = outOrderList;
        this.sortData();
      },
      formatShowData: function (text) {
        if (SysUtil.isEmpty(text)) {
          text = '';
        }
        var htmlText = text.replace(/ /g, '&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
        return htmlText;
      }
    },

    template: template
  };
}();